<template>
  <div class="setting">
    <!-- 顶部标签 -->
    <div class="top_biaoti">
      <van-nav-bar title="设置" left-arrow @click-left="onClickLeft"></van-nav-bar>
    </div>
    <div>
     <van-cell title="头像">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <van-icon slot="right-icon" name="arrow" style="line-height: inherit;" />
    </van-cell>
     <van-cell title="修改登录密码">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <van-icon slot="right-icon" name="arrow" style="line-height: inherit;" />
    </van-cell>
     <van-cell title="修改支付密码">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <van-icon slot="right-icon" name="arrow" style="line-height: inherit;" />
    </van-cell>
      <van-cell title="地址管理" to="/address">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <van-icon slot="right-icon" name="arrow" style="line-height: inherit;"  />
    </van-cell>
    </div>
    <button class="tcdqzh" @click="OnTcdqzh">退出当前账号</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/me')
    },
    OnTcdqzh () {
      this.$router.push('/about')
    }
  }
}
</script>

<style scoped>
.van-nav-bar {
  background-color: #4990e0;
}
.van-nav-bar__title {
  color: #fff;
}
.van-nav-bar .van-icon{
  color: #fff;
}
.van-cell__title{
    position: relative;
}
.tcdqzh{
    width: 290px;
    height: 40px;
    background-color: #4990e0;
    border: transparent;
    color: #fff;
    border-radius: 5px;
    margin-top: 70px;
}
</style>
